<template>
  <view class="common pos-r forget">
    <view class="pos-a z-0 wp-100" :class="env === 'H5' ? 'bg-yel' : 'bg-lg'" :style="globalData.barStyle" />
    <u-navbar :fixed="false">
      <u-icon slot="left" name="arrow-left" :color="env === 'H5' ? '#fff' : '#000'" size="19" @tap="navigateBack" />
      <view slot="center" :class="[env === 'H5' ? 'c-fff' : 'c-bla']">修改密码</view>
    </u-navbar>
    <view class="main">
      <view class="content bg-gry">
        <view class="h-a bg-whi">
          <view class="d-f pv-12 ph-24">
            <view class="title fs-30 lh-72 w-140">旧密码</view>
            <u--input v-model="oldPassword" placeholder="请输入旧密码" border="false" class="wc-280" type="password" />
          </view>
          <view class="bdb" />
          <view class="d-f pv-12 ph-24">
            <view class="c-666 fs-30 lh-72 w-140">新密码</view>
            <u--input v-model="newPassword" placeholder="请设置6-20位密码，包含字母和数字" border="false" maxlength="20" class="wc-280" type="password" />
          </view>
          <view class="bdb" />
          <view class="d-f pv-12 ph-24">
            <view class="c-666 fs-30 lh-72 w-140">确认密码</view>
            <u--input v-model="confirmNewPassword" placeholder="需跟前面密码一致" border="false" class="wc-280" maxlength="15" type="password" />
          </view>
        </view>
      </view>
      <view class="footer">
        <u-button type="primary" text="确认" @tap="commit" shape="circle" color="#FEA20D" :throttleTime="2000" />
      </view>
    </view>
  </view>
</template>
<script>
import commonMxins from '@/mixins/common.js';
export default {
  mixins: [commonMxins],
  data() {
    return {
      oldPassword: '',
      newPassword: '',
      confirmNewPassword: ''
    };
  },
  methods: {
    async commit() {
      if (!this.oldPassword || !this.newPassword || !this.confirmNewPassword) {
        uni.showToast({ title: '信息不能为空', icon: 'none', duration: 3000 });
        return;
      }
      if (this.newPassword.length < 6 || this.newPassword.length > 20) {
        uni.showToast({ title: '密码长度应为6-20位', icon: 'none', duration: 3000 });
        return;
      }
      // 密码强度校验
      const hasLetter = /[a-zA-Z]/.test(this.newPassword);
      const hasNumber = /\d/.test(this.newPassword);
      if (!hasLetter || !hasNumber) {
        uni.showToast({ title: '密码需包含字母和数字', icon: 'none', duration: 3000 });
        return;
      }
      if (this.confirmNewPassword !== this.newPassword) {
        uni.showToast({ title: '两次密码不一致', icon: 'none', duration: 3000 });
        return;
      }
      if (this.oldPassword === this.newPassword) {
        uni.showToast({ title: '新密码不能与旧密码相同', icon: 'none', duration: 3000 });
        return;
      }
      let data = { oldPassword: this.oldPassword, newPassword: this.newPassword };
      try {
        let res = await this.$request({ url: '/app/appUser/modifyPassword', data });
        if (res.code === 200) {
          uni.showToast({ title: '密码修改成功', icon: 'success', duration: 3000 });
          // 重置表单
          this.oldPassword = '';
          this.newPassword = '';
          this.confirmNewPassword = '';
          await this.$async.delay(2000);
          uni.redirectTo({ url: '/pages/global/login/login' });
        } else {
          uni.showToast({ title: res.msg || '密码修改失败', icon: 'none', duration: 3000 });
        }
      } catch (error) {
        console.error('密码修改失败:', error);
        uni.showToast({ title: '密码修改失败，请重试', icon: 'none', duration: 3000 });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.forget {
  .main {
    .content {
      height: calc(100% - 67px);
    }
  }
}
</style>
